<template>
    <div>
        <el-table :data="userDataList" width="100%" stripe border class="heard-bg">
            <el-table-column label="用户名称" prop="userName" width="120px"></el-table-column>
            <el-table-column label="用户账号" prop="userAccount" width="130px"></el-table-column>
            <el-table-column label="所属机构" prop="deptName"></el-table-column>
            <el-table-column label="用户类型" prop="userType">
                <template slot-scope="scope">
                    <span v-if="scope.row.userType === '0'">普通用户</span>
                    <!--<span v-else-if="scope.row.userType === '1'">超级管理员</span>-->
                    <span v-else-if="scope.row.userType === '2'">超级管理员</span>
                </template>
            </el-table-column>
            <el-table-column label="AG工号" prop="agNum"></el-table-column>
            <el-table-column label="CTI工号" prop="ctiNum"></el-table-column>
            <el-table-column label="分机号" prop="extensionNum"></el-table-column>
            <el-table-column label="手机号" prop="userPhone" width="120px"></el-table-column>
            <el-table-column label="邮箱" prop="userEmail" show-overflow-tooltip></el-table-column>
            <!--<el-table-column label="状态" prop="userStatus">-->
            <!--<template slot-scope="scope">-->
            <!--<span v-if="scope.row.userStatus === 'normal'">正常 </span>-->
            <!--<span v-else-if="scope.row.userStatus === 'freeze'">冻结 </span>-->
            <!--<span v-else-if="scope.row.userStatus === 'del'">已删除 </span>-->
            <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column label="最后登录日期" prop="lastLoginTime" width="155px"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
            <Pagination
                :hanleChangeCurrentPage="hanleChangeCurrentPage"
                :handleChangeSize="handleChangeSize"
                :currentPage="currentPage"
                :pageSize="pageSize"
                :total="total"
            />
        </div>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination/Pagination.vue';

export default {
    name: 'departChildInfo',
    components: {
        Pagination,
    },
    data() {
        return {
            userDataList: [],
            // 当前页码
            currentPage: 1,
            // 页码大小
            pageSize: 10,
            // 总数
            total: 0,
        };
    },
    props: {
        userInfo: {
            type: Object,
            default: {},
        },
    },
    mounted() {
        this.getInitData();
    },
    watch: {
        userInfo: {
            handler(val, oldVal) {
                if (val) {
                    this.getInitData();
                }
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        getInitData() {
            const params = {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                deptId: this.userInfo.id,
            };
            this.$post.userManage.selectByUser(params)
                .then((res) => {
                    if (res.data.success) {
                        this.userDataList = res.data.content.userList;
                        this.total = res.data.content.userCount;
                    }
                });
        },
        // 页码切换方法
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.getInitData();
        },
        // 切换分页大小方法
        handleChangeSize(val) {
            this.pageSize = val;
            this.getInitData();
        },
    },
};
</script>

<style lang='scss'>
.pagination {
    text-align: right;
}
</style>
